import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text, Input, Button} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {isNumber, getUserInfo, wxH5Pay, navigateTo, showToast, setStorage, userInfoInterface} from '../../utils/common'

import './cash.scss'

import icon_83 from "../../assets/img/common/icon_83.png";
import icon_84_on from "../../assets/img/common/icon_84_on.png";
import icon_84 from "../../assets/img/common/icon_84.png";
import icon_85 from "../../assets/img/common/icon_85.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Cash extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    cashType:2, // 提现方式1：微信钱包 2：银行卡
    items: [],
    currentBankNo: null, // 银行卡ID
    currentBank: {}, // 银行卡ID
    amount: null, // 提现金额
    userInfo: {} as userInfoInterface
  }

  componentWillMount(): void {
    let userInfo = getUserInfo()
    this.setState({ userInfo })
    this.getUserCards()
  }

  link(url: string = '/pages/index/index'): void {
    navigateTo(url)
  }

  changeCashType(cashType:number){
    this.setState({
      cashType
    })
  }

  getUserCards() {
    let { userStore } = this.props.stores
    userStore.getUserCardsAsync({
      callback: res => {
        this.setState({ items: res.items })
      }
    })
  }

  changeBank(item: object) {
    this.setState({
      currentBank: item,
      currentBankNo: item.id
    })
  }

  // 截取银行卡后四位
  getPartBankNo(bankNo: string){
    if(bankNo.length<5){ return bankNo }
    return bankNo.substr(-4)
  }

  setAmount() {
    let { userInfo } = this.state
    if(userInfo.account <= 0) { showToast('提现金额不足'); return }
    this.setState({ amount: userInfo.account })
  }

  inputChange(e) {
    let amount = e.detail.value
    if(!isNumber(amount)){ showToast('只能输入数字~'); return }
    this.setState({ amount })
  }

  // 提现
  submit() {
    let { amount, currentBankNo, userInfo, currentBank } = this.state
    console.log(currentBankNo)
    console.log(amount)
    if(!amount && amount <= 0){ showToast('请填写提现金额~');return }
    if(amount > userInfo.account){ showToast('您的余额不足~');return }
    if(!currentBankNo){ showToast('请选择银行卡~');return; }
    let { userStore } = this.props.stores
    let cashInfo = {
      cashAmount: amount,
      cashType: '银行卡',
      cashBank: currentBank['bankName']
    }

    userStore.saveUserCash({
      form: {
        amount,
        cardId: currentBankNo,
      },
      callback: () => {
          showToast('提现申请提交成功~')
          setStorage('cashInfo', cashInfo)
          setTimeout(() => {
            navigateTo('/pages/mine/cashSuccess')
          },2000)
      }
    })
  }

  render() {
    let { cashType,items,currentBankNo,userInfo,amount } = this.state
    let commision = (userInfo.account || 0).toFixed(2)
    return (
      <View className='my-my_cash_now page-bg'>
        <View className='cash-header'>
          <View className='cash-header__list-desc'>请输入提现金额（元）</View>
          <View className='cash-header__input-group'>
            <Input className='cash-header__from-input' name='amount' type='number'
                   onInput={this.inputChange.bind(this)} placeholderClass='placeholder_class' placeholder='￥0.00'
                   value={amount}
            />
          </View>
          {
            amount===-100&&
            <View className='cash-header__info'>
               额外扣除{0}元手续费<Text className='color color-orange'>(费率10%)</Text>
            </View>
          }

            <View className='cash-header__info'>
               当前余额{commision}元，<Text className='color-theme' onClick={this.setAmount.bind(this)}>全部提现</Text>
            </View>
        </View>

        <View className='type-item'>
          {/* <View className='item' onClick={this.changeCashType.bind(this, 1)}>
            <Image src={icon_83} className='type-icon'/>
            <View className='list-title'>微信钱包</View>
            {cashType===1&& <Image src={icon_84} className='check-icon'/>}
            {cashType!==1&& <Image src={icon_84_on} className='check-icon'/>}
          </View>*/}
          <View className='type-item__item' onClick={this.changeCashType.bind(this, 2)} >
            <Image src={icon_85} className='type-item__type-icon' />
            <View className='type-item__list-title'>银行卡</View>
            {/*{cashType===2&& <Image src={icon_84} className='type-item__check-icon'/>}
            {cashType!==2&& <Image src={icon_84_on} className='type-item__check-icon'/>}*/}
          </View>

          <View className={cashType===2 ? 'item-sub item-sub-on' : 'item-sub'}>
            {items&&
            items.map(item => {
              return(
                <View className='cash__op' onClick={this.changeBank.bind(this, item)} key={item.id}>
                  <View className='cash__op-list-title'>{item.bankName}（{this.getPartBankNo(item.cardNumber)}）</View>
                  {currentBankNo!==item.id&& <Image src={icon_84} className='cash__op-check-icon' />}
                  {currentBankNo===item.id&& <Image src={icon_84_on} className='cash__op-check-icon' />}
                </View>
              )
            })
            }
            <View className='cash__op' onClick={this.link.bind(this,'/pages/mine/bankAdd')}>
              <View className='list-title'>+ 使用新卡提现</View>
            </View>
          </View>
        </View>
        <View className='from-wrap'>
          <Button formType='submit' className='circular-submit' onClick={this.submit.bind(this)}>确认提现</Button>
          <View className='circular-tip'>预计24小时内到账</View>
        </View>
      </View>
    )
  }
}

export default Cash
